<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="canvas" width="50" height="20"></canvas>
<textarea id="result" style="width: 1000px;height: 300px;"></textarea>
</body>

<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var tCanvas = document.createElement("canvas");
    tCanvas.width = 1000;
    tCanvas.height = 1000;
    //document.body.appendChild(tCanvas);
    var tContext = tCanvas.getContext("2d");
    var image = new Image();
    var colors = [];
    var str = "";
    var angle = Math.PI/180 * (360 / 69);
    image.onload = function(){
        for(var j = 0; j<7; j++){
            i = 0;
            for(var i=0; i< 69; i++){
                tContext.save()
                tContext.clearRect(0,0, 1000 , 1000);
                tContext.translate(500, 500);
                tContext.rotate( - Math.PI / 2 - angle * i);
                tContext.translate(-500, -500);
                tContext.drawImage(image, 0, 0, 1000, 1000);
                tContext.restore();
                context.save();
                context.clearRect(0,0,500, 500);
                context.translate(25,0);
                context.drawImage(tCanvas, -500,-40*j);
                context.restore();
                var data = context.getImageData(25,10,1,1);
                var color = "rgb("+data.data[0]+","+data.data[1]+","+data.data[2]+")";
                str += "\"" +color +"\",";
                colors.push(color);
            }
            console.log(colors);
        }
        document.getElementById("result").innerHTML = str ;

    };
    image.src = "images/color.png";

</script>
</html>